import { Alert } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';
import {SocialProviderDemo} from "@/components/SocialProviderDemo";

## Social Providers

<Alert role="none" heading="Zero Configuration">

The Authenticator [automatically infers](/connected-components/authenticator#step-1-configure-backend) `socialProviders` from `amplify pull`,
but can be explicitly defined as seen below.

</Alert>

For your [configured social providers](https://docs.amplify.aws/javascript/build-a-backend/auth/concepts/external-identity-providers/), you can also provide `amazon`, `facebook`, or `google`:

<InlineFilter filters={['angular']}>
```html{1}
<amplify-authenticator
  [socialProviders]="['amazon', 'apple', 'facebook', 'google']"
>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>
```
</InlineFilter>
<InlineFilter filters={['react']}>
```js{3}
export default function App() {
  return (
    <Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}
```
</InlineFilter>
<InlineFilter filters={['vue']}>
```html{2}
<template>
  <authenticator :social-providers="['amazon', 'apple', 'facebook', 'google']">
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>
```
</InlineFilter>
<InlineFilter filters={['svelte']}>
```html{1}
<Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
  {#snippet children({ user, signOut })}
    <h1>Hello {user.username}!</h1>
    <button onclick={signOut}>Sign Out</button>
  {/snippet}
</Authenticator>
```
</InlineFilter>

<Example>
  <SocialProviderDemo/>
</Example>

_[Step by step video](https://www.youtube.com/watch?v=8KwZNn56F78&feature=youtu.be) on setting up social providers._
